<template>
  <div class="guide">
    <slider class="slider" :index="0" :show-indicators="true" :infinite="false">
      <div class="frame" >
        <image class="img" resize="cover" src="root:img/guide/750-1.png"></image>
      </div>
      <div class="frame" >
        <image class="img" resize="cover" src="root:img/guide/750-2.png"></image>
      </div>
      <div class="frame" >
        <image class="img" resize="cover" src="root:img/guide/750-3.png"></image>
        <div class="entry" @click="dologin">
          <text style="font-size:36px;color:#ffffff;text-align:center;line-height:80px;">立即体验</text>
        </div>
      </div>
      <indicator class="indicator"></indicator>
    </slider>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      imageList: [
          { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
        ]
    }
  },
  created() {
    var page=weex.requireModule("page")
    page.doubleBack()
    page.setBackKeyCallback(()=>{
        page.enableBackKey(false);
    })
  },
  methods: {
    dologin(){
      this.pref.setString('isfirst','yes')
      this.push('root:pages/login/import.js')
    }
  }
}
</script>
<style scoped>
.guide{
  width: 750px;
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.image {
    position: absolute;
    width: 700px;
    top: 0;
    bottom: 0;
  }
.slider {
  position: absolute;
  width: 750px;
  top: 0;
  bottom: 0;
  left: 0;
}
.frame {
  width: 750px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.indicator{
  width: 132px;
  height: 16px;
  item-color: rgba(70,120,245,0.4);
  item-selected-color:rgba(70,120,245,1);
  item-size: 16px;
  position: absolute;
  bottom: 140px;
  left: 309px;
}
.img{
  width: 750px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.entry{
  width: 280px;
  height: 80px;
  background-color: rgba(70,120,245,1);
  border-radius: 20px;
  position: absolute;
  bottom: 140px;
  left: 236px;
}
</style>